<template>
  <div class="login-bg">
    <div id="particles"></div>
    <a-form
      id="components-form-demo-normal-login"
      :form="form"
      class="login-form"
      @submit="handleSubmit"
    >
      <h1 style="color:white;text-align:center;">mardin管理系统</h1>
      <a-form-item>
        <a-input
          v-decorator="[
          'username',
          { rules: [{ required: true, message: '请输入你的用户名!' }] },
        ]"
          placeholder="Username"
        >
          <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input
          v-decorator="[
          'password',
          { rules: [{ required: true, message: '请输入你的密码' }] },
        ]"
          type="password"
          placeholder="Password"
        >
          <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-checkbox
          v-decorator="[
          'remember',
          {
            valuePropName: 'checked',
            initialValue: true,
          },
        ]"
        >记住密码</a-checkbox>
        <a-button type="primary" html-type="submit" class="login-form-button">登 录</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import "@/utils/particles";
export default {
  mounted() {
    window.particlesJS("particles", {
      particles: {
        number: {
          value: 20,
          density: {
            enable: true,
            value_area: 800,
          },
        },
        color: {
          value: "#ffffff",
        },
        shape: {
          type: "circle",
          stroke: {
            width: 0,
            color: "#000000",
          },
          polygon: {
            nb_sides: 5,
          },
        },
        opacity: {
          value: 1,
          random: false,
          anim: {
            enable: false,
            speed: 1,
            opacity_min: 0.1,
            sync: false,
          },
        },
        size: {
          value: 3,
          random: true,
          anim: {
            enable: false,
            speed: 40,
            size_min: 0.1,
            sync: false,
          },
        },
        line_linked: {
          enable: true,
          distance: 150,
          color: "#ffffff",
          opacity: 0.4,
          width: 1,
        },
        move: {
          enable: true,
          speed: 6,
          direction: "none",
          random: false,
          straight: false,
          out_mode: "out",
          bounce: false,
          attract: {
            enable: false,
            rotateX: 600,
            rotateY: 1200,
          },
        },
      },
      interactivity: {
        detect_on: "canvas",
        events: {
          onhover: {
            enable: true,
            mode: "grab",
          },
          onclick: {
            enable: true,
            mode: "push",
          },
          resize: true,
        },
        modes: {
          grab: {
            distance: 140,
            line_linked: {
              opacity: 1,
            },
          },
          bubble: {
            distance: 400,
            size: 40,
            duration: 2,
            opacity: 8,
            speed: 3,
          },
          repulse: {
            distance: 200,
            duration: 0.4,
          },
          push: {
            particles_nb: 4,
          },
          remove: {
            particles_nb: 2,
          },
        },
      },
      retina_detect: true,
    });
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "normal_login" });
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields(async (err, values) => {
        if (!err) {
          values.password = this.$encrypt(values.password);
          let { success } = await this.$post("/user/adminlogin", values);
          if (success) {
            this.$ms("登录成功", () => {
              sessionStorage.setItem("login-user", values.username);
              this.$router.push("/");
            });
          } else {
            this.$me("用户名或密码错误");
          }
        }
      });
    },
  },
};
</script>

<style scoped lang='scss'>
.login-bg {
  background: lightgreen;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

#particles {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.login-form {
  width: 300px;
  height: 300px;
}

.login-form-button {
  display: block;
  width: 300px;
}
</style>